<template>
  <div class="pr-dictionaries">
    <div class="pr-dictionaries-head">
      <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
        @change="query" />
      <el-input v-model="name" placeholder="用户名称" clearable @change="query" />
      <el-button @click="query">查询</el-button>
    </div>
    <div>
      <el-table :data="tableData" border fit stripe>
        <el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.title" align="center"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ scope.row[item.title] }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="paging.current" :page-sizes="paging.sizes" :page-size="paging.size" layout="total, sizes, prev, pager, next, jumper"
        :total="paging.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        row: {},

        tableHead: [{
            id: 1,
            label: '日志类型',
            title: 'operation'
          },
          {
            id: 2,
            label: '操作IP',
            title: 'ip'
          },
          {
            id: 5,
            label: '时间',
            title: 'createDate'
          },
          {
            id: 3,
            label: '用户名称',
            title: 'userName'
          },
          {
            id: 4,
            label: '方法名称',
            title: 'method'
          },

          {
            id: 6,
            label: '具体消息',
            title: 'params'
          }
        ],

        tableData: [],


        time: null,
        name: '',
        paging: {
          size: 10,
          sizes: [10, 30, 50, 100],
          total: 0,
          current: 1 // 分页默认开始显示页数
        },
      }
    },
    created() {
      // 获取日志列表
      this.getSysLogList();
    },
    methods: {
      // 分页参数改变
      handleSizeChange(val) {
        if (this.paging.size !== val) {
          this.paging.size = val;
          this.getSysLogList();
        }
      },
      handleCurrentChange(val) {
        if (this.paging.current !== val) {
          this.paging.current = val;
          this.getSysLogList();
        }
      },

      // 重新查询
      query: function() {
        this.paging.current = 1;
        this.getSysLogList();
      },

      getSysLogList: function() {
        let params = {};
        if (this.time) {
          params = {
            startTime: this.time[0] || '',
            endTime: this.time[1] || '',
            name: this.name,
            page: this.paging.current,
            pageSize: this.paging.size,
          };
        } else {
          params = {
            startTime: '',
            endTime: '',
            name: this.name,
            page: this.paging.current,
            pageSize: this.paging.size,
          };
        }

        this.$server.getSysLogList(params).then(res => {
          let tableData = res.page.list;
          this.tableData = tableData;
          // 设置分页
          let paging = {
            sizes: [10, 30, 50, 100],
            current: res.page.currPage,
            size: res.page.pageSize,
            total: res.page.totalCount,
          }
          this.paging = paging;
        })
      },

    }
  }
</script>
<style lang="scss" scope>
  .pr-dictionaries {
    &-head {
      display: flex;
      padding: 20px;

      >div {
        margin-right: 20px;
      }

      .el-cascader {
        width: 200px;
      }

      .el-input {
        width: 200px;
      }
    }
  }

  .pr-dialog-assignRoles {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-pagination {
    margin-top: 20px;
  }
</style>
